<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    function myClick(idStr,fun)
    {
        var btn=document.getElementById(idStr);
        btn.onclick=fun;
    }

    window.onload=function()
    {
        //创建一个广州节点，添加到#city下
        myClick("btn01",function()
        {
            //创建广州节点
            //创建li元素节点
            //document.createElement()
            //可以用于创建一个元素节点对象，将会根据该标签名创建元素节点对象
            //并且将创建好的对象作为返回值返回
            var li=document.createElement("li");//创建标签名为li元素节点
            //console.log(li);//控制台显示创建了<li>……</li>节点

            //创建广州文本节点
            //document.createTextNode()
            //可以用来创建一个文本节点对象
            //需要一个文本内容作为参数，将会根据该内容创建文本节点
            //并将新的节点返回
            var gzText=document.createTextNode("广州");
            //console.log(text);

            //将子节点text添加到父节点li中
            //appendChild()
            //语法： 父节点.appendChild(子节点)
            li.appendChild(gzText);
            //console.log(newli);

            //获取id为city的节点
            //注意：如果没有事先设置css样式，那么新加的节点格式将会不同
            var city=document.getElementById("city");
            city.appendChild(li);
        }
        );

        //将广州节点插入到id为bj的节点前面
        myClick("btn02",function()
        {
            //创建广州节点
            //创建li元素节点
            //document.createElement()
            //可以用于创建一个元素节点对象，将会根据该标签名创建元素节点对象
            //并且将创建好的对象作为返回值返回
            var li=document.createElement("li");//创建标签名为li元素节点
            //console.log(li);//控制台显示创建了<li>……</li>节点

            //创建广州文本节点
            //document.createTextNode()
            //可以用来创建一个文本节点对象
            //需要一个文本内容作为参数，将会根据该内容创建文本节点
            //并将新的节点返回
            var gzText=document.createTextNode("广州");
            //console.log(text);

            //将子节点text添加到父节点li中
            //appendChild()
            //语法： 父节点.appendChild(子节点)
            li.appendChild(gzText);
            //console.log(newli);

            //获取id为bj的节点
            var bj=document.getElementById("bj");

            //获取id为city的节点
            var city=document.getElementById("city");

            //insertBefore()
            //可以在指定的子节点前插入新的子节点
            //语法 父节点.insertBefore(新节点,旧节点);
            city.insertBefore(li,bj);
        }
        );

        //使用广州节点替换id为bj的节点
        myClick("btn03",function()
        {
            //创建广州节点
            //创建li元素节点
            //document.createElement()
            //可以用于创建一个元素节点对象，将会根据该标签名创建元素节点对象
            //并且将创建好的对象作为返回值返回
            var li=document.createElement("li");//创建标签名为li元素节点
            //console.log(li);//控制台显示创建了<li>……</li>节点

            //创建广州文本节点
            //document.createTextNode()
            //可以用来创建一个文本节点对象
            //需要一个文本内容作为参数，将会根据该内容创建文本节点
            //并将新的节点返回
            var gzText=document.createTextNode("广州");
            //console.log(gzText);

            //将子节点text添加到父节点li中
            //appendChild()
            //语法： 父节点.appendChild(子节点)
            li.appendChild(gzText);
            //console.log(li);

            //获取id为bj的节点
            var bj=document.getElementById("bj");

            //获取id为city的节点
            var city=document.getElementById("city");
            city.replaceChild(li,bj);//用li替换bj
        }
        );

        //删除id为bj的节点
        myClick("btn04",function()
        {
            //获取id为bj的节点
            var bj=document.getElementById("bj");
            //获取id为city的节点
            var city=document.getElementById("city");

            //removeChild()
            //可以删除一个子节点
            //语法 父节点.removeChild(子节点);
            city.removeChild(bj);
        }
        );

        //删除id为bj的节点,知道iid是bj，但是不知道父元素
        myClick("btn05",function()
        {
            //获取id为bj的节点
            var bj=document.getElementById("bj");

            //removeChild()
            //可以删除一个子节点
            //语法 父节点.removeChild(子节点);
            //parentNode可直接获取父节点
            bj.parentNode.removeChild(bj);
        }
        );

        //读取id为city内的HTML代码
        myClick("btn06",function()
        {
            //获取id为city的节点
            var city=document.getElementById("city");
            console.log(city.innerHTML);

            //读取里面的文档
            console.log(city.innerText);
        }
        );

        //设置id为bj内的HTML代码
        myClick("btn07",function()
        {
            //获取id为bj的节点
            var bj=document.getElementById("bj");
            bj.innerHTML="昌平";
            //bj.innerText="昌平";
        }
        );

        //新思路，用修改HTML代码的方式增加节点
        myClick("btn08",function()
        {
            //获取id为city的节点
            //使用innerHTML也可以完成DOM的增删改的一些功能
            var city=document.getElementById("city");
            //city.innerHTML += "<li>广州</li>";

            //创建一个li
            var li=document.createElement("li");
            //向li中设置文本
            li.innerHTML="广州";
            //将li添加到city中
            //appendChild()向节点的子节点末尾添加节点
            city.appendChild(li);
        }
        );
    };
    </script>
</head>
<body>
    <button id="btn01">功能一</button>
    <button id="btn02">功能二</button>
    <button id="btn03">功能三</button>
    <button id="btn04">功能四</button>
    <button id="btn05">功能五</button>
    <button id="btn06">功能六</button>
    <button id="btn07">功能七</button>
    <button id="btn08">功能八</button>
    <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>
</body>
</html>